<template>
    <div class="box">
        <van-nav-bar :title="businessName" left-arrow @click-left="onClickLeft" />
        <main class="main">
            <van-sidebar class="aside" v-model="active" @change="onChange">
                <van-sidebar-item v-for="item in foodType" :title="item.typeName" />
            </van-sidebar>
            <section class="section">
                <!-- 某个分类下的菜品列表数据 -->
                <div class="food-item" v-for="item in foodArr">
                    <img :src="item.foodImg" alt="" width="80" />
                    <div class="food-info">
                        <p class="title">{{ item.foodName }}</p>
                        <p class="stock">剩余库存：{{ item.stock }}</p>
                        <div class="item-price">
                            <p class="price">
                                ￥<span class="price-text">{{ item.foodPrice }}</span>
                            </p>
                            <!-- 这里需要展示加入购物车按钮，还是加减号按钮 -->
                            <button v-if="!item.flag" @click="addCart(item)">加入购物车</button>
                            <van-stepper v-else v-model="item.num" theme="round" button-size="22" disable-input
                                @plus="plus(item)" @minus="minus(item)" />
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <footer class="footer">
            <van-action-bar>
                <van-action-bar-icon :badge="cartNum" icon="cart-o" text="购物车" @click="goCart" />
                <van-action-bar-button type="primary" text="去消费" @click="onClickButton" />
            </van-action-bar>
        </footer>
    </div>
</template>

<script>
import { getFoodTypeAPI, getFoodListAPI } from "@/api/shop";
import { addCartAPI, updatedCartAPI } from "@/api/cart";
export default {
    data() {
        return {
            active: 0,
            businessName: "",
            businessId: "",
            // 用于切换菜品展示的时候，显示选购规格的按钮，还是加减的按钮
            flag: false,
            // 菜品分类
            foodType: [],
            // 菜品数据
            foodArr: [],
            // 购物车中数据
            cartNum: 0,
            // 登录的用户信息
            loginUser: {},
        };
    },
    methods: {
        // 返回
        onClickLeft() {
            this.$router.back();
        },
        // 加载当前店铺的菜品数据
        loadFoodType() {
            getFoodTypeAPI({ businessId: this.businessId }).then((resp) => {
                if (resp.data.code == 20000) {
                    this.foodType = resp.data.datas;
                    // 加载右侧的第一个菜品分类下的菜品数据
                    this.loadFoodList(this.foodType[0].typeId, this.businessId);
                }
            })
        },
        // 加载指定分类下对应的菜品数据
        loadFoodList(typeId, businessId) {
            getFoodListAPI({ typeId, businessId }).then((resp) => {
                if (resp.data.code == 20000) {
                    for (let i = 0; i < resp.data.datas.length; i++) {
                        resp.data.datas[i].flag = false;
                        resp.data.datas[i].num = 0;
                    }
                    this.foodArr = resp.data.datas;
                }
            });
        },
        // 点击左侧菜单切换菜品数据
        onChange(index) {
            this.loadFoodList(
                this.foodType[index].typeId,
                this.foodType[index].businessId
            );
        },
        // 点击添加购物车
        addCart(item) {
            // 确保用户是登录状态，如果没有登录，则踢回到登录页面
            let loginUser = localStorage.getItem("loginUser");
            if (!loginUser) {
                this.$router.push("/login");
                return;
            }
            // 说明用户已经登录，在点击添加按钮的时候，需要将当前购物车中添加的商品数据
            this.loginUser = JSON.parse(loginUser);
            let cart = {
                foodId: item.foodId,
                businessId: this.businessId,
                userId: this.loginUser.userId,
                quantity: 1,
            };
            // 发送请求，添加购物车数据
            addCartAPI(cart).then((resp) => {
                if (resp.data.code == 20000) {
                    showNotify({
                        message: resp.data.message,
                        color: "#fff",
                        background: "#8dc149",
                    });
                    item.flag = !item.flag;
                    this.cartNum += 1;
                }
            });
        },
        // 点击+号
        plus(item) {
            this.cartNum++;
            this.updateCartData(item, item.num + 1);
        },
        // 点击-号
        minus(item) {
            this.cartNum--;
            this.updateCartData(item, item.num - 1);
        },
        // 修改购物车数据
        updateCartData(item, num) {
            updatedCartAPI({
                foodId: item.foodId,
                userId: this.loginUser.userId,
                quantity: num,
            }).then((resp) => {
                if (resp.data.code == 20000) {
                    showNotify({
                        message: resp.data.message,
                        color: "#fff",
                        background: "#8dc149",
                    });
                }
            });
        },
        // 点击去消费
        onClickButton() { },
        // 点击购物车
        goCart() {
            // 跳转到购物车页面
            this.$router.push("/cart");
        }
    },
    created() {
        // 获取路由参数中的数据
        this.businessName = this.$route.query.businessName;
        this.businessId = this.$route.query.businessId;
        this.loadFoodType();
    }
};
</script>

<style lang="less" scoped>
.box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .main {
        display: flex;
        justify-content: space-between;
        flex: 1;
        overflow-y: auto;

        .aside {
            width: 80px;
            background-color: #f7f8fa;
            height: 100%;
            overflow-y: auto;
        }

        .section {
            flex: 1;
            height: 100%;
            overflow-y: auto;

            .food-item {
                margin-left: 5px;
                margin-bottom: 5px;
                padding-right: 10px;
                display: flex;
                justify-content: space-between;

                .food-info {
                    margin-left: 5px;
                    flex: 1;

                    .title {
                        font-weight: bold;
                        font-size: 14px;
                    }

                    .stock {
                        margin: 5px 0;
                        font-size: 12px;
                        color: #999;
                    }

                    .item-price {
                        display: flex;
                        justify-content: space-between;

                        .price {
                            color: red;
                            font-size: 12px;

                            .price-text {
                                font-size: 20px;
                            }
                        }

                        button {
                            border: none;
                            background-color: #01b7fb;
                            color: #fff;
                            padding: 3px 10px;
                            border-radius: 40px;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }

    .footer {
        height: 50px;
        background-color: #ccc;
    }
}
</style>